<template>
  <div class="card-progress">
    <h5 class="mb">
      {{ value }}
      <small class="text-muted">{{ title }}</small>
    </h5>
    <div class="progress">
      <Progress
        :percent="data"
        :stroke-width="5"
        :stroke-color="color"
        hide-info
        style="width: 80%"
      />
      <span class="progress-value">{{ data }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "bar",
  components: {},
  props: {
    value: {
      type: String,
      default: "0",
    },
    title: {
      type: String,
      default: "-",
    },
    data: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() {},
};
</script>
<style lang="less">
.card-progress {
  width: 100%;
  margin-bottom: 10px;
  .mb {
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: #414d5f;
    font-size: 0.9375rem;
    .text-muted {
      color: #98a6ad;
      margin-left: 0.75rem;
      font-size: 0.75rem;
      font-weight: 400;
    }
  }
  .progress {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .progress-value {
      width: 20%;
      text-align: right;
      font-weight: 700;
      color: #6c757d;
    }
  }
}
</style>